<template>
	<uni-popup ref="popupRef" type="center" @change="handleChange">
		<view class="bg-white rounded-lg ml-30 mr-30 pb-20 w-[690rpx] box-popup">
			<view class="popup-item flex justify-between items-center">
				<view class="label flex items-center" @click="onPay">
					<text>需要</text>
					<view class="flex items-center ml-10" v-if="props.payType == 1">
						<ImageBoxVue src="/static/icons/red.png" width="28rpx" height="28rpx"></ImageBoxVue>
						<text class="ml-4">{{props.allPrice}}钻</text>
					</view>
					<view class="flex items-center ml-10" v-else>
						<ImageBoxVue src="/static/icons/blue.png" width="28rpx" height="28rpx"></ImageBoxVue>
						<text class="ml-4">{{props.allPrice}}钻</text>
					</view>
				</view>
				<ImageBoxVue src="/static/icons/arrow_right.png" width="18rpx" height="29.5rpx"></ImageBoxVue>
			</view>
			<template v-if="props.payType == 1">
				<view class="popup-item flex justify-between items-center" @click="onPath('/pages/views/charge')">
					<view class="label">充值获取赠送的大量红钻</view>
					<ImageBoxVue src="/static/icons/arrow_right.png" width="18rpx" height="29.5rpx"></ImageBoxVue>
				</view>
				<view class="popup-item flex justify-between items-center" @click="freeShow = !freeShow">
					<view class="label">傲任务赚取钻石免费解锁测试结果</view>
					<ImageBoxVue src="/static/icons/arrow_right.png" width="18rpx" height="29.5rpx"></ImageBoxVue>
				</view>
				<view class="pt-20 px-20" v-if="freeShow">
					<view class="item-task flex items-center">
						<ImageBoxVue src="/static/icons/advertisement.png" width="60rpx" height="60rpx"></ImageBoxVue>
						<view class="flex-1 ml-10">
							<view class="title">看广告收钻石</view>
							<view class="desc">(每天三次，每次不同广告,每次收3红钻)</view>
						</view>
						<view class="btn flex justify-center">1/3</view>
					</view>
					<view class="item-task flex items-center" @click="handleShare">
						<ImageBoxVue src="/static/icons/moments.png" width="60rpx" height="60rpx"></ImageBoxVue>
						<view class="flex-1 ml-10">
							<view class="title">分享到朋友圈</view>
							<view class="desc">(每天1次,每次收3红钻)</view>
						</view>
						<view class="btn flex justify-center">去分享</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="popup-item flex justify-between items-center" @click="onPath('/pages/views/charge')">
					<view class="label">直接充值查看结果反正也不贵</view>
					<ImageBoxVue src="/static/icons/arrow_right.png" width="18rpx" height="29.5rpx"></ImageBoxVue>
				</view>
				<view class="popup-item flex justify-between items-center" @click="onPath('/pages/user/vip')">
					<view class="label">成为VIP享受赠送钻石及专属成长系统</view>
					<ImageBoxVue src="/static/icons/arrow_right.png" width="18rpx" height="29.5rpx"></ImageBoxVue>
				</view>
			</template>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		watch,
	} from 'vue';
	const props = defineProps({ // payType 支付类型 1、红钻 2、蓝钻
		modelValue: {
			type: Boolean,
			default: false
		},
		payType: {
			type: Number,
		},
		allPrice: {
			type: Number,
			default: 0
		}
	})
	const emit = defineEmits(['pay', 'update:modelValue'])

	const popupRef = ref(null)
	const freeShow = ref(false)

	watch(() => props.modelValue, () => {
		if (props.modelValue) {
			popupRef.value.open()
		} else {
			popupRef.value && popupRef.value.close()
		}
	}, {
		deep: true,
		immediate: true
	})

	const handleShare = () => {
		uni.share({
			provider: "weixin",
			scene: 'WXSceneTimeline',
			type: 1,
			title: '占占',
			summary: '占占',
		})
	}

	const handleChange = (e) => {
		emit('update:modelValue', e.show)
	}

	const onPay = () => {
		emit('pay')
	}

	const onPath = (router) => {
		uni.navigateTo({
			url: router
		})
	}
</script>

<style lang="scss" scoped>
	.box-popup {
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(178, 205, 224, 0.6);
		border-radius: 20rpx;

		.popup-item {
			height: 140rpx;
			padding: 0 40rpx;
			border-bottom: 2rpx solid #eee;

			.label {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.item-task {
			height: 120rpx;
		}

		.title {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.desc {
			font-weight: 300;
			font-size: 24rpx;
			color: #999999;
		}

		.btn {
			background: url('/static/test/bg_btn.png') no-repeat;
			background-size: cover;
			width: 128rpx;
			height: 66rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			padding-top: 10rpx;
			box-sizing: border-box;
			margin-left: 20rpx;
		}
	}
</style>